<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>北京2304随机点名器</title>
	
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.top {
			width: 100%;
			height: 70px;
		}

		.mid {
			width: 550px;
			height: 280px;
			margin: auto;
			padding: 15px;
			border-radius: 25px;
			background-color: #ff751a;
		}

		.mid_top {
			height: 55px;
			background-color: #ff751a;
		}

		.mid_mid {
			width: 300px;
			height: 87px;
			margin: auto;
			background-color: #A4A4A4;
			border-radius: 15px;
			vertical-align: middle;
			line-height: 87px;
		}

		.kk {
			height: 26px;
		}

		.button {
			width: 145px;
			height: 50px;
			border-radius: 8px;
			border: 0px;
			background-color: #89F221;
			font-size: 25px;
			font-family: "微软雅黑";
		}
	</style>
</head>

<body>
	<!--顶层 -->
	<div class="top"></div>

	<!--中间层 -->
	<div class="mid">
		<!--中间层顶部 -->
		<div class="mid_top"></div>
		<!--中间层中间 -->
		<div id="display" class="mid_mid" align="center" style="font-size:288%">前端扛把子</div>
		<div class="kk"></div>
		<div class="mid_bottom" align="center"><input id="click" class="button" type="button" value="开始"
				onclick="run()" /></div>
				<div class="mid_bottom" align="center"><input id="click2" class="button" type="button" value="结束"
					onclick="to_stop()" /></div>
	</div>

	<script>
		var mycontent = document.getElementById('display');
		//初始化点名数组
		var names = ['张文锋', '刘梦', '秦瑞琪', '耿胜泰', '师颖', '张圆春', '汪静芸', '宋浩仁', '石阳', '冯国豪', '沈泽昱', '肖雨', '李伟超',
			'张鹏', '刘珂铭', '杨金冉', '闵鹏', '史晓宇', '李永赛', '周生平', '杜朋利', '金振', '周美美', '闫旭嘉', '王波', '李延吉', '王雪晴', '张柯', '高琪乙', '莫小松', '刘栋', '龙星宇', '赵京京', '李宏伟', '温馨','滕杰','孙文硕','朱鑫豪','高天润','潘浩泽','王晨','孟凡杰','吴鹏飞',
'张阳', '韩傲漩', '乔欣磊', '马晓斌', '王怡婧', '田安星', '王申欢', '刘鹏宇', '王鹏锐', '马明宇', '戴天林', '胡萍', '马兆通', '王雨杰',
			'朱梦瑶', '于鑫', '张艳荣', '彭学硕', '胡苇臻', '堵志莹', '王鹏博', '赵喜丰', '唐凯燊'];
		// alert(names.length);
		//生成随机数  随机数作为数组的下标  取出元素 
		// var num = Math.floor(Math.random()*66); // 乘以数字的个数+第一个数 
		
		// // 放到指定的标签中 
		// var content = null;
		// window.onload = function(){    //获取名字显示的元素
		// 	// 因为在head中获取 body 元素  所以必须使用 load 事件  
		// 	content = document.querySelector('#display');
		// 	content.innerText = names[num];
		// }
		function to_show(){
			var num = Math.floor(Math.random()*66);
			mycontent.innerHTML = names[num];
		}
		var count;
		function run(){
			alert(123);
			count = setInterval(to_show,50);
		}

		function to_stop(){
			clearInterval(count);
		}

		// 使用 定时器不断执行这个动作  
		// 停止 结束 
		
	</script>

</body>

</html>